<template>
	<view class="hisotry">
		<u-list :height="listHeight" @scrolltolower="getList" @refresherrefresh="refresherrefresh"
			:refresherEnabled="true" :refresher-triggered="isPull" refresher-background="#F2F4F6"
			refresher-threshold="50">
			<template v-if="list.length">
				<view class="order-item" v-for="(it, index) in list" :key="it.id">
					<view class="order-item__type">
						<view class="order-item__type--label">
							{{it.mtype}}<text class="tag">[{{it.is_type}}单]</text>
						</view>
						<view class="order-item__time">
							{{it.create_time}}
						</view>
					</view>
					<view class="order-item__name">
						{{it.customername}}
						<view class="order-item__tel" @tap="makePhoneCall(it.customerphone)">{{it.customerphone}}</view>
					</view>
					<view class="order-item__addr">
						{{it.address}}
					</view>
					<view class="order-item__desc">
						备注信息：{{it.remarks}}
					</view>
					<view class="order-item__remarks" v-if="it.parts_list.length">
						<view class="order-item__remarks--item" v-for="(q,idx) in it.parts_list" :key="idx">
							<view class="order-item__remarks--label">{{q.type_text}} {{ q.content || '--' }}
							</view>
							<view class="order-item__remarks--content">数量：x{{q.number}}</view>
						</view>
					</view>
					<view class="order-item__group">
						<view class="order-item__status">
							{{ it.status_text }}
						</view>
						<view class="order-item__group--btn full" @tap="nav(`/subpackage/order/pages/_id?id=${it.id}`)">
							查看详情</view>
					</view>
				</view>
			</template>
			<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</u-list>
	</view>
</template>

<script>
	import {
		getUserOutPaginate
	} from "@/api"
	export default {
		props: {
			// 1公司配件 0个人配件
			status: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				isNext: true,
				loading: false,
				isPull: false,
				// 1公司，2个人，3采购
				navStatus: 1,
				listHeight: 100
			}
		},
		watch: {
			status(e) {
				this.navStatus = e
				if (!e) {
					this.navStatus = 2
				}
				this.init()
			},
		},
		created() {
			this.getList()
		},
		mounted() {
			const that = this
			uni.getSystemInfo({
				success: ({
					windowHeight
				}) => {
					setTimeout(async () => {
						await this.$nextTick()
						uni.createSelectorQuery().selectAll('.hisotry').boundingClientRect(
							res => {
								// 获取列表定位
								this.listHeight = windowHeight - res[0].top
							}).exec()
					})

				}
			})
		},
		methods: {
			getList() {
				if (this.loading || !this.isNext) return;
				this.loading = true
				getUserOutPaginate({
					type: this.navStatus,
					page: this.page,
					limit: this.limit,
					user_id: 139
				}).then(res => {
					const {
						code,
						data
					} = res;
					if (code === 1) {
						this.list = this.list.concat(data.data)
						this.page++
						if (this.list.length >= data.total) {
							this.isNext = false
						}
					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			refresherrefresh() {
				this.isPull = true
				this.isNext = true;
				this.init()
			},
			init() {
				this.list = []
				this.page = 1
				this.limit = 10
				this.isNext = true;
				this.getList()
			},
			formatParts(it) {
				if (it.is_company === 1) {
					return '公司配件'
				}
				if (it.is_new === 1) {
					return '采购配件'
				}
				if (it.is_company === 0 && it.is_new === 0) {
					return '个人配件'
				}
				return '--'
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../../../../../pages/repatriation/index.scss";

	.hisotry {

		&-item {
			margin: 20rpx 20rpx 0;
		}

		.order-item {
			margin-bottom: 0;

			&__tel {
				color: var(--theme-color);
				margin-left: 10rpx;
				font-weight: bold;
			}

			&__name {
				justify-content: flex-start;
			}

			&__remarks {
				&--item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 5rpx 0;

					&.cost {
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #fff;
						margin-top: 0;
					}
				}

				&--label {
					width: auto;
					font-weight: normal;

					&.cost {
						color: #666;
						font-weight: bold;
					}
				}

				&--content {
					flex: none;
				}
			}

			&__desc {
				color: #666;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>